.gemContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-image: url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0Ro8fG8NY0HpDQbsS5a8YJlAXj7MgACTCEAAgm3kVdokKKQ4eTIzTYE.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  padding: 5px;
  box-sizing: border-box;
}

.gemList {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .grid-row {
    display: flex;
    flex-direction: row;
    flex: 1;
  }

  .grid-cell {
    flex: 1;
    aspect-ratio: 1 / 1; // 保持正方形（现代浏览器支持）
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 6px;
    border-radius: 4px;
  }
}

.red-gem {
  background: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0Jo8fG86LQ55wEn4XqdXKOi1zCPHwACSiEAAgm3kVfAdFazE3qw3DYE.png') no-repeat center;
  background-size: cover;
}

.blue-gem {
  background: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0Bo8fG371QHiXEzAaSMYUO0oEXWVgACSCEAAgm3kVd0dE_vl27q4jYE.png') no-repeat center;
  background-size: cover;
}

.green-gem {
  background: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDez9o8fG3DnUzAT-nJVd9EDxcCfxRgAACRyEAAgm3kVcTMz2farlPLTYE.png') no-repeat center;
  background-size: cover;
}

.pink-gem {
  background: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0Fo8fG37wMFEY0CzuRye0ZQ8RRN8AACSSEAAgm3kVcipeSVCe3TjjYE.png') no-repeat center;
  background-size: cover;
}

.black-gem {
  background: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDez1o8fG3gnh1di8o4dh3i1QIVhp2xAACRSEAAgm3kVeXx91YLBbu4jYE.png') no-repeat center;
  background-size: cover;
}

.white-gem {
  background: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDez5o8fG3IsmpaBMkWKVe-PE5C070kQACRiEAAgm3kVfuZEJhbpkwhTYE.png') no-repeat center;
  background-size: cover;
}

.gold-gem {
  background: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0No8fG8lC520Z4sqxuv2szLiU51hwACSyEAAgm3kVe9agb3mknfwDYE.png') no-repeat center;
  background-size: cover;
}

.empty {
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.3);
}

// 响应式：小屏幕适配
@media (max-width: 480px) {
  .gemContainer {
    width: 240px;
    height: 240px;
  }
  
  .grid-container {
    max-width: 90vw;
  }
  .grid-cell {
    font-size: 14px;
  }
}